<template>
  <div class="company-user-list">
<!--    <global-title title="用户管理列表"></global-title>-->
    <!-- <el-button
      type="primary"
      @click="addUser"
      v-if="operationList.includes('edit')"
      style="margin: 0px 0px 20px 20px"
      >创建新账号</el-button
    > -->
    <!-- <div class="global-select">
      <div
        class="global-select-btn"
        :class="{ ' global-select-btn-hover': searchForm.company }"
        @click="companySearchDialog"
      >
        <p>
          {{ searchForm.company ? searchForm.company.companyName : "全部公司" }}
        </p>
        <i class="el-icon-arrow-down global-select-icon-arrow"></i>
        <i
          class="el-icon-circle-close global-select-icon-close"
          @click.stop="clearSearchCompany"
        ></i>
      </div>
    </div> -->
    <ul class="global-operation-list">
      <li class="global-operation-left">
        <ul class="global-filter-list">
          <li class="global-filter-item">
            <h2 class="global-filter-item-title">关键字：</h2>
            <el-input
              placeholder="请输入用户名称或者手机号"
              v-model="searchForm.keyword"
              style="width: 250px"
              clearable
            ></el-input>
          </li>
          <li class="global-filter-item">
            <h2 class="global-filter-item-title">创建时间：</h2>
            <el-date-picker
              v-model="searchForm.chooseDate"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </li>
          <li class="global-filter-item">
            <el-button
              type="primary"
              class="global-filter-item-search"
              style="
                box-shadow: 0px 5px 12px 0px rgba(24, 97, 253, 0.43);
                background: #1861fd;
              "
              @click="rePosts"
              >搜索</el-button
            >
          </li>
        </ul>
      </li>
      <li class="global-operation-right">
      </li>
    </ul>
    <div class="global-table-content">
      <div class="global-table" v-loading="tableLoading">
        <el-table
          :data="dataList"
          :header-cell-style="{
            background: '#F6F7FA',
            color: '#333',
            height: '60px',
          }"
          v-loading="tableLoading"
                :row-style="{height: '0'}"
                :cell-style="{padding: '3px'}"
                max-height="500"
          ref="multipleTable"
          :default-sort="{ prop: 'create_time', order: 'descending' }"
          v-if="dataList && dataList.length > 0"
        >
          <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
          <el-table-column prop="id" label="序号" show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="username"
            label="用户名称"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="telephone"
            label="联系电话"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="create_time"
            label="创建时间"
            show-overflow-tooltip
            :formatter="formatterTime"
          ></el-table-column>
          <el-table-column label="状态" show-overflow-tooltip>
            <template slot-scope="scope">
              <p class="global-table-status" v-if="scope.row.status === 1">
                已启用
              </p>
              <p class="global-table-status red" v-else>已禁用</p>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="68"
            v-if="operationList.length > 0"
          >
            <template slot-scope="scope">
              <p
                v-if="
                  !operationList.includes('edit')
                "
              >
                无操作
              </p>
              <el-dropdown
                placement="bottom"
                @command="handleCommand($event, scope.row)"
                v-else
              >
                <span class="global-table-operation-btn">
                  操作<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">

                  <el-dropdown-item
                    command="e"
                    v-if="
                      operationList.includes('edit') && scope.row.status === 1
                    "
                    >禁用</el-dropdown-item
                  >
                  <el-dropdown-item
                    command="f"
                    v-if="
                      operationList.includes('edit') && scope.row.status === 2
                    "
                    >启用</el-dropdown-item
                  >
                  <el-dropdown-item
                    command="d"
                    v-if="
                      operationList.includes('edit')
                    "
                    >删除</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
        <!-- 暂无数据~ -->
        <div
          class="no-data"
          v-else
          style="height: calc(100vh - 130px - 80px);display: flex;align-items: center;justify-content: center;flex-direction: column"
        >
          <img style="width: 265px;height: 120px;margin-bottom: 32px" src="@/assets/images/tyNoData.png" alt="" />
          <div style="font-size: 16px;color: #A5A9B5">暂无数据~</div>
        </div>
      </div>
      <div class="global-page">
        <div class="global-page-left">
          <!-- <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            :disabled="dataList.length === 0"
          ></el-checkbox> -->
        </div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          :current-page="pageNum"
          background
          layout="sizes, total, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>

    <el-dialog
      title="选择公司"
      :visible.sync="optionsData.companyDialog"
      center
      width="1250px"
    >
      <company-dialog
        @change="changeCompany"
        :company-data="companyData"
        v-if="optionsData.companyDialog"
      ></company-dialog>
    </el-dialog>

    <el-dialog
      :title="editDialogForm.title"
      :visible.sync="editDialog"
      center
      width="700px"
      custom-class="global-form-dialog"
    >
      <el-form
        :model="editDialogForm"
        :rules="editDialogRules"
        ref="editDialogRules"
        label-width="120px"
        class="demo-ruleForm"
        autocomplete="off"
      >
        <el-form-item
          label="用户名称："
          prop="username"
          v-if="editDialogForm.title !== '修改密码'"
        >
          <el-input
            v-model="editDialogForm.username"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="所属公司："
          prop="company"
          v-if="editDialogForm.title !== '修改密码'"
        >
          <div
            class="global-form-my-select-btn"
            :class="{
              'global-form-my-select-btn-hover': editDialogForm.company,
            }"
            @click="companyEditDialog"
          >
            <el-input
              readonly
              class="global-form-my-select-btn-input"
              @mouseover.native="editEnter"
              @mouseout.native="editLeave"
              :class="{
                'global-form-my-select-btn-input-hover': editCloseColor,
              }"
              clearable
            >
              <template slot="suffix">
                <i
                  class="el-icon-arrow-down global-form-my-select-icon-arrow"
                  @mouseenter="editEnter"
                  v-if="!editCloseIcon"
                ></i>
                <i
                  class="el-icon-circle-close global-form-my-select-icon-close"
                  @mouseenter="editEnter"
                  v-else
                  @click.stop="clearEditCompany"
                ></i>
              </template>
            </el-input>
            <p>
              {{
                editDialogForm.company
                  ? editDialogForm.company.companyName
                  : "请选择"
              }}
            </p>
          </div>
        </el-form-item>
        <el-form-item
          label="角色："
          prop="roleId"
          v-if="editDialogForm.title !== '修改密码'"
        >
          <el-select
            v-model="editDialogForm.roleId"
            placeholder="请选择"
            clearable
            :loading="optionsData.roleLoading"
          >
            <el-option
              v-for="item in optionsData.roleList"
              :key="item.id"
              :label="item.roleName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="手机号："
          prop="telephone"
          v-if="editDialogForm.title !== '修改密码'"
        >
          <el-input
            v-model="editDialogForm.telephone"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="密码："
          prop="password"
          v-if="editDialogForm.title !== '编辑用户'"
        >
          <el-input
            v-model="editDialogForm.password"
            placeholder="请输入"
            @focus="changeInputType"
            :type="inputType"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="重复密码："
          prop="checkPassword"
          v-if="editDialogForm.title !== '编辑用户'"
        >
          <el-input
            v-model="editDialogForm.checkPassword"
            placeholder="请输入"
            @focus="changeInputType"
            :type="inputType"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="global-form-dialog-btn">
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="分配权限"
      :visible.sync="permissionDialog"
      center
      width="500px"
      custom-class="permission-dialog"
    >
      <div class="permission-dialog-tree">
        <el-tree
          @check="clickNode"
          :data="treeList"
          ref="tree"
          show-checkbox
          node-key="id"
          :default-expand-all="true"
          :default-checked-keys="idList"
          :props="defaultProps"
        >
        </el-tree>
      </div>
      <el-button
        class="permission-dialog-btn"
        type="primary"
        @click="getCheckedKeys"
        >保存</el-button
      >
    </el-dialog>
  </div>
</template>

<script>
import API from "@/api/apiCompanyUser";

export default {
  name: "CompanyUserList",
  props: {
    operationList: Array,
  },
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入用户名"));
      } else if (
        !/^[a-zA-Z0-9_\u4e00-\u9fa5]{3,11}$/.test(this.editDialogForm.username)
      ) {
        callback(new Error("输入用户名需限制在3-11位(大小写字母、数字、中文)"));
      } else {
        callback();
      }
    };
    const validateTelephone = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入手机号"));
      } else if (!/^\d{11}$/.test(this.editDialogForm.telephone)) {
        callback(new Error("请输入正确的手机号"));
      } else {
        callback();
      }
    };
    const validatePass = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入密码"));
      } else if (!/^[0-9A-Za-z]{6,18}$/.test(this.editDialogForm.password)) {
        callback(new Error("输入用户名需限制在6-18位且没有中文"));
      } else {
        if (this.editDialogForm.checkPassword) {
          this.$refs.editDialogRules.validateField("checkPassword");
        }
        callback();
      }
    };
    const validatePass2 = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.editDialogForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      treeList: [],
      idList: [],
      currentId: null,
      defaultProps: {
        children: "children",
        label: "label",
      },
      companyData: null,
      inputType: "text", // 含有密码输入框时需要
      // 搜索条件
      searchForm: {
        sort: 2,
        company: null,
        username: null,
        telephone: null,
        keyword: null,
        status: null,
        chooseDate: null,
      },
      // 表格相关
      isIndeterminate: false,
      checkAll: false,
      multipleSelection: [], // 多选
      editDialog: false, // 编辑弹窗
      editCloseIcon: false, // close展示
      editCloseColor: false, // close展示
      // 编辑弹窗表单
      editDialogForm: {
        title: "新增用户",
        userId: null,
        username: null,
        telephone: null,
        company: null,
        password: null,
        checkPassword: null,
        roleId: null,
      },
      editDialogRules: {
        // 编辑弹窗表单验证
        telephone: [
          { required: true, validator: validateTelephone, trigger: "blur" },
        ],
        username: [
          { required: true, validator: validateUsername, trigger: "blur" },
        ],
        company: [{ required: true, message: "请选择公司", trigger: "change" }],
        password: [
          { required: true, validator: validatePass, trigger: "blur" },
        ],
        checkPassword: [
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
        roleId: [{ required: true, message: "请选择角色", trigger: "change" }],
      },
      // 下拉框列表
      optionsData: {
        companyDialogType: null, // 1 - 筛选弹窗 2 - 编辑弹窗
        companyDialog: false,
        roleLoading: true,
        roleList: [],
      },
      // 表格相关
      tableLoading: false,
      dataList: [],
      pageSize: 10,
      pageNum: 1,
      total: 0,
      pageSizes: [10, 20, 50, 100],
      // 权限弹窗
      permissionDialog: false,
      permissionList: [],
      changeTime: '',
    };
  },
  activated() {
    this.init();
  },
  methods: {
    changeSort(e) {
      // e.order descending-降序-2 ascending-正序-1
      if (e.order === "descending") {
        this.searchForm.sort = 2;
      } else if (e.order === "ascending") {
        this.searchForm.sort = 1;
      } else {
        this.searchForm.sort = null;
      }
      this.rePosts();
    },
    formatterTime(row) {
      return this.$moment(row.createTime).format("YYYY-MM-DD HH:mm:ss");
    },
    editLeave() {
      this.editCloseIcon = false;
      this.editCloseColor = false;
    },
    editEnter() {
      if (this.editDialogForm.company) {
        this.editCloseIcon = true;
        this.editCloseColor = true;
      }
    },
    clearSearchCompany() {
      // 清除搜索栏公司信息
      this.searchForm.company = null;
    },
    clearEditCompany() {
      // 清除编辑弹窗
      this.editDialogForm.company = null;
      this.editCloseColor = false;
      this.$refs.editDialogRules.validateField("company");
    },
    companySearchDialog() {
      // 打开搜索栏弹窗
      this.companyData = this.searchForm.company;
      this.optionsData.companyDialogType = 1;
      this.optionsData.companyDialog = true;
    },
    companyEditDialog() {
      // 打开编辑弹窗
      this.companyData = this.editDialogForm.company;
      this.optionsData.companyDialogType = 2;
      this.optionsData.companyDialog = true;
    },
    changeCompany(company) {
      if (this.optionsData.companyDialogType === 1) {
        this.optionsData.companyDialog = false;
        this.searchForm.company = company;
      } else if (this.optionsData.companyDialogType === 2) {
        this.optionsData.companyDialog = false;
        this.editDialogForm.company = company;
        this.$refs.editDialogRules.validateField("company");
      }
    },
    // 全局初始化
    init() {
      this.companyData = null;
      // 搜索条件重置
      this.searchForm = {
        username: null,
        telephone: null,
        company: null,
        keyword: null,
        chooseDate: null,
      };
      this.editDialog = false; // 初始化弹窗
      this.idList = [];
      this.permissionList = []; // 初始化权限列表
      this.rePosts();
    },
    // 防止密码自动输入
    changeInputType() {
      this.inputType = "password";
    },
    // 新增用户按钮
    addUser() {
      this.editDialogForm = {
        title: "新增用户",
        userId: null,
        username: null,
        telephone: null,
        company: null,
        roleId: null,
      };
      this.$nextTick(() => {
        this.$refs.editDialogRules.clearValidate();
      });
      this.editDialog = true;
    },
    // 表单操作项
    handleCommand(e, row) {
      console.log(row);
      if (e === "a") {
        this.currentId = row.id;
        this.getPermission(row.id);
      } else if (e === "b") {
        this.editDialog = true;
        this.editDialogForm = {
          title: "编辑用户",
          userId: row.id,
          username: row.username,
          telephone: row.telephone,
          company: {
            companyName: row.company_name,
            id: row.company_id,
          },
          roleId: row.user_type,
        };
      } else if (e === "c") {
        this.editDialog = true;
        this.editDialogForm = {
          title: "修改密码",
          userId: row.id,
        };
      } else if (e === "d") {
        const ids = [row.id];
        this.handleStatus(ids, 3);
      } else if (e === "e") {
        const ids = [row.id];
        this.handleStatus(ids, 2);
      } else if (e === "f") {
        const ids = [row.id];
        this.handleStatus(ids, 1);
      }
    },
    // 表单选择
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(val);
    },
    // toastClose(done) {
    //   this.$confirm("确认关闭？")
    //     .then(() => {
    //       done();
    //     })
    //     .catch(() => {});
    // },
    // 分页pageSize改变
    handleSizeChange(e) {
      this.pageSize = e;
      this.rePosts();
    },
    // 分页pageNum改变
    handleCurrentChange(e) {
      this.pageNum = e;
      this.getPost();
    },
    // 重新请求
    rePosts() {
      this.pageNum = 1;
      this.dataList = [];
      this.getPost();
    },
    // 表格列表
    getPost() {
      this.tableLoading = true;
      const params = {
        token: this.$store.state.token,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      if (this.searchForm.keyword) {
        params.keyword = this.searchForm.keyword;
      }
      if(this.searchForm.chooseDate && this.searchForm.chooseDate.length > 0){
        params.startTime = new Date(this.searchForm.chooseDate[0]).getTime()
        params.endTime = new Date(this.searchForm.chooseDate[1]).getTime()
      }
      API.getAppUserList(params).then((res) => {
        if (res.key === 1000) {
          res = res.result;
          this.total = res.count;
          this.dataList = res.list;
          this.tableLoading = false;
        }
      });
    },
    // 编辑用户信息接口
    handleConfirm() {
      this.$refs.editDialogRules.validate((valid) => {
        if (!valid) return;
        if (this.editDialogForm.title === "修改密码") {
          if (!this.editDialogForm.userId) {
            this.$message({
              type: "success",
              message: "操作失败，请刷新页面后重试",
            });
          }
          this.handleChangePassword();
        } else {
          this.handleEdit();
        }
      });
    },
    handleEdit() {
      this.$bus.$emit("show-loading", true);
      const params = {
        token: this.$store.state.token,
        telephone: this.editDialogForm.telephone,
        companyId: this.editDialogForm.company.id,
        username: this.editDialogForm.username,
        roleId: this.editDialogForm.roleId,
      };
      if (this.editDialogForm.userId) {
        params.id = this.editDialogForm.userId;
      } else {
        params.password = this.editDialogForm.password;
      }
      API.add_normal_user(params).then((res) => {
        if (res.key === 1000) {
          if (this.editDialogForm.userId) {
            this.$message({
              type: "success",
              message: "编辑用户成功",
            });
            this.getPost();
          } else {
            this.$message({
              type: "success",
              message: "新增用户成功",
            });
            this.rePosts();
          }
          this.editDialog = false;
        }
        this.$bus.$emit("show-loading", false);
      });
    },
    handleChangePassword() {
      this.$bus.$emit("show-loading", true);
      const params = {
        token: this.$store.state.token,
        password: this.editDialogForm.password,
        userId: this.editDialogForm.userId,
      };
      API.changePassword(params).then((res) => {
        if (res.key === 1000) {
          this.getPost();
          this.editDialog = false;
          this.$message({
            type: "success",
            message: "修改密码成功",
          });
        }
        this.$bus.$emit("show-loading", false);
      });
    },
    // 编辑弹窗关闭
    handleEditDialogClose() {
      this.editDialog = false;
      this.$refs.editDialogRules.resetFields();
    },
    // 删除全部按钮
    handleDelAll() {
      if (this.multipleSelection && this.multipleSelection.length > 0) {
        const ids = this.multipleSelection.map((item) => item.id);
        this.handleStatus(ids, 3);
      } else {
        this.$message({
          type: "warning",
          message: "请至少选择一项",
        });
      }
    },
    // 删除接口
    handleStatus(ids, status) {
      // status 1-启用 2-禁用 3-删除
      let title;
      if (status === 1) {
        title = "启用";
      } else if (status === 2) {
        title = "禁用";
      } else if (status === 3) {
        title = "删除";
      }
      this.$confirm("此操作将" + title + "该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$bus.$emit("show-loading", true);
        const params = {
          token: this.$store.state.token,
          status,
        };
        params.userIds = ids.join(",");
        API.doUpAppUserStatus(params).then((res) => {
          if (res.key === 1000) {
            this.$message({
              type: "success",
              message: title + "成功",
            });
          }
          if (status === 3) {
            this.rePosts();
          } else {
            this.getPost();
          }
          this.$bus.$emit("show-loading", false);
        });
      });
      // .catch(() => {
      //   this.$message({
      //     type: "info",
      //     message: "已取消" + title
      //   });
      // });
    },
    // 权限窗口关闭
    // handlePermissionDialogClose() {
    //   this.permissionDialog = false;
    // },
    // 获取权限列表
    getPermission(id) {
      this.idList = [];
      this.$bus.$emit("show-loading", true);
      const params = {
        token: this.$store.state.token,
        userId: id,
      };
      API.getUserPermissionList(params).then((res) => {
        if (res.key === 1000) {
          res = res.result.list;
          this.permissionList = res;
          let treeList = [];
          const idList = [];
          res.forEach((firstItem) => {
            const firstObj = {
              id: "x" + firstItem.id,
              label: firstItem.powerName,
            };
            if (firstItem.list && firstItem.list.length > 0) {
              firstObj.children = [
                {
                  id: firstItem.id,
                  label: firstItem.powerName,
                },
              ];
              if (firstItem.isChoose === 1) {
                idList.push(firstItem.id);
              }
              let bol = true;
              firstItem.list &&
                firstItem.list.forEach((secondItem) => {
                  if (secondItem.buttonId) {
                    const secondObj = {
                      id: secondItem.buttonId,
                      label: secondItem.buttonName,
                    };
                    firstObj.children.push(secondObj);
                  }
                  if (secondItem.isChooseButton === 1) {
                    idList.push(secondItem.buttonId);
                  } else if (secondItem.isChooseButton === 0) {
                    bol = false;
                  }
                });
              if (bol) {
                idList.push(firstItem.id);
              }
            }
            treeList.push(firstObj);
          });
          this.treeList = treeList;
          this.idList = idList;

          this.permissionDialog = true;
        }
        this.$bus.$emit("show-loading", false);
      });
    },
    getCheckedKeys() {
      const idList = this.$refs.tree.getCheckedKeys();
      const params = {
        token: this.$store.state.token,
        userId: this.currentId,
        powerIds: JSON.stringify(idList.filter((item) => item[0] !== "x")),
      };
      API.upPermission(params).then((res) => {
        if (res.key === 1000) {
          this.permissionDialog = false;
          this.$message({
            type: "success",
            message: "分配成功",
          });
        }
      });
    },
    clickNode(node, { checkedKeys }) {
      let currentId = node.id;
      if (currentId[0] === "x") return; // 选中父级 无需操作
      let parentItem;
      this.treeList.some((firstItem) => {
        if (!firstItem.children) return false;
        // if (firstItem.children[0] === currentId) return true;
        return firstItem.children.some((secondItem) => {
          if (secondItem.id === currentId) {
            parentItem = firstItem;
            return true;
          }
          return false;
        });
      });
      if (parentItem) {
        if (parentItem.children[0].id === currentId) {
          const idList = checkedKeys;
          if (!checkedKeys.includes(currentId)) {
            parentItem.children.forEach((item) => {
              let index = idList.indexOf(item.id);
              if (index > -1) {
                idList.splice(index, 1);
              }
            });
            this.$refs.tree.setCheckedKeys(idList);
          }
        } else {
          if (checkedKeys.includes(currentId)) {
            const idList = checkedKeys;
            console.log(idList.toString());
            idList.push(parentItem.children[0].id);
            console.log(idList.toString());
            this.$refs.tree.setCheckedKeys(idList);
          } else {
            const idList = checkedKeys;
            let bol = parentItem.children.some((item) =>
              idList.includes(item.id)
            );
            if (!bol) {
              let index = idList.indexOf(parentItem.id);
              if (index > -1) {
                idList.splice(index, 1);
                this.$refs.tree.setCheckedKeys(idList);
              }
            }
          }
        }
      }
    },
    getRoleList() {
      const params = {
        token: this.$store.state.token,
      };
      API.getEditUserRoleList(params).then((res) => {
        if (res.key === 1000) {
          this.optionsData.roleLoading = false;
          this.optionsData.roleList = res.result.list;
        }
      });
    },
    // 全选
    handleCheckAllChange() {
      this.$refs.multipleTable.toggleAllSelection();
    },
    //导出
    handleExport() {
      this.$bus.$emit("show-loading", true);
      const params = {
        token: this.$store.state.token,
      };
      if (this.searchForm.telephone) {
        params.telephone = this.searchForm.telephone;
      }
      if (this.searchForm.username) {
        params.username = this.searchForm.username;
      }
      if (this.searchForm.company && this.searchForm.company.id) {
        params.companyId = this.searchForm.company.id;
      }
      API.getExportCompanyUserList(params).then((res) => {
        if (res) {
          const content = res.data;
          const blob = new Blob([content]);
          // 从response的headers中获取filename,
          // 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
          var contentDisposition = res.headers["content-disposition"];
          var patt = new RegExp("filename=([^;]+\\.[^\\.;]+);*");
          var result = patt.exec(contentDisposition);
          const fileName = decodeURI(result[1]);
          if ("download" in document.createElement("a")) {
            // 非IE下载
            const elink = document.createElement("a");
            elink.download = fileName;
            elink.style.display = "none";
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
          } else {
            // IE10+下载
            navigator.msSaveBlob(blob, fileName);
          }
        }
        this.$bus.$emit("show-loading", false);
      });
    },
  },
};
</script>

<style lang="sass" scoped>
.company-user-list
  @include container
  box-shadow: 0px 0px 10px 0px rgba(93, 139, 198, 0.05)
  border-radius: 14px
  padding-top: 66px
  ::v-deep .permission-dialog
    .el-dialog__body
      display: flex
      align-items: center
      flex-direction: column
      padding: 30px 60px
      .permission-dialog-tree
        width: 100%
        max-height: 450px
        overflow-y: auto
        overflow-x: hidden
        margin-bottom: 40px
//.permission-dialog-item
//  background: #f2f2f2
</style>
